<template>
  <view class="mobile-insights">
    <!-- 移动端优化头部 -->
    <view class="mobile-header">
      <view class="header-top">
        <text class="menu-btn" @click="toggleDrawer">☰</text>
        <text class="title">数据洞察</text>
        <text class="refresh-btn" @click="refreshData">↻</text>
      </view>
      
      <!-- 快速筛选 -->
      <scroll-view class="quick-filters" scroll-x>
        <view 
          v-for="filter in quickFilters" 
          :key="filter.value"
          class="filter-chip"
          :class="{ active: activeFilter === filter.value }"
          @click="selectFilter(filter.value)"
        >
          {{ filter.label }}
        </view>
      </scroll-view>
    </view>

    <!-- 侧边抽屉 -->
    <view class="drawer" :class="{ open: drawerOpen }">
      <view class="drawer-mask" @click="toggleDrawer"></view>
      <view class="drawer-content">
        <view class="drawer-header">
          <text class="drawer-title">筛选选项</text>
          <text class="close-btn" @click="toggleDrawer">✕</text>
        </view>
        
        <scroll-view class="drawer-body" scroll-y>
          <!-- 时间范围 -->
          <view class="filter-group">
            <text class="group-title">时间范围</text>
            <view class="filter-options">
              <view 
                v-for="range in timeRanges" 
                :key="range.value"
                class="filter-option"
                :class="{ active: selectedTimeRange === range.value }"
                @click="selectTimeRange(range.value)"
              >
                {{ range.label }}
              </view>
            </view>
          </view>

          <!-- 仓库选择 -->
          <view class="filter-group">
            <text class="group-title">仓库</text>
            <view class="filter-options">
              <view 
                v-for="warehouse in warehouses" 
                :key="warehouse.id"
                class="filter-option"
                :class="{ active: selectedWarehouses.includes(warehouse.id) }"
                @click="toggleWarehouse(warehouse.id)"
              >
                {{ warehouse.name }}
              </view>
            </view>
          </view>

          <!-- 物料类型 -->
          <view class="filter-group">
            <text class="group-title">物料类型</text>
            <view class="filter-options">
              <view 
                v-for="type in materialTypes" 
                :key="type.value"
                class="filter-option"
                :class="{ active: selectedTypes.includes(type.value) }"
                @click="toggleMaterialType(type.value)"
              >
                {{ type.label }}
              </view>
            </view>
          </view>

          <!-- 预警级别 -->
          <view class="filter-group">
            <text class="group-title">预警级别</text>
            <view class="filter-options">
              <view 
                v-for="level in warningLevels" 
                :key="level.value"
                class="filter-option"
                :class="{ active: selectedWarnings.includes(level.value) }"
                @click="toggleWarningLevel(level.value)"
              >
                <text :style="{ color: level.color }">●</text>
                {{ level.label }}
              </view>
            </view>
          </view>
        </scroll-view>
        
        <view class="drawer-footer">
          <view class="footer-btn reset" @click="resetFilters">重置</view>
          <view class="footer-btn apply" @click="applyFilters">应用</view>
        </view>
      </view>
    </view>

    <!-- 主要内容区域 -->
    <scroll-view class="mobile-content" scroll-y @scroll="handleScroll">
      <!-- 概览卡片 -->
      <view class="overview-cards">
        <view class="card-grid">
          <view 
            v-for="card in overviewCards" 
            :key="card.id"
            class="overview-card"
            :style="{ background: card.gradient }"
            @click="card.action && card.action()"
          >
            <view class="card-icon">{{ card.icon }}</view>
            <text class="card-value">{{ formatValue(card.value) }}</text>
            <text class="card-label">{{ card.label }}</text>
            <view class="card-trend" v-if="card.trend">
              <text :class="{ up: card.trend > 0, down: card.trend < 0 }">
                {{ card.trend > 0 ? '↗' : '↘' }} {{ Math.abs(card.trend) }}%
              </text>
            </view>
          </view>
        </view>
      </view>

      <!-- 图表区域 -->
      <view class="charts-section">
        <!-- 库存趋势 -->
        <view class="chart-container">
          <view class="chart-header">
            <text class="chart-title">库存趋势</text>
            <text class="chart-period">{{ activeFilterLabel }}</text>
          </view>
          <view class="chart-wrapper">
            <canvas 
              canvas-id="mobileTrendChart"
              class="mobile-chart"
            ></canvas>
          </view>
        </view>

        <!-- 分类占比 -->
        <view class="chart-container">
          <view class="chart-header">
            <text class="chart-title">分类占比</text>
            <text class="chart-period">实时</text>
          </view>
          <view class="chart-wrapper">
            <canvas 
              canvas-id="mobilePieChart"
              class="mobile-chart"
            ></canvas>
          </view>
        </view>

        <!-- 预警统计 -->
        <view class="warning-stats">
          <text class="section-title">预警统计</text>
          <view class="warning-list">
            <view 
              v-for="warning in filteredWarnings" 
              :key="warning.id"
              class="warning-item"
              :class="warning.level"
              @click="showWarningDetail(warning)"
            >
              <view class="warning-icon">{{ warning.icon }}</view>
              <view class="warning-content">
                <text class="warning-title">{{ warning.title }}</text>
                <text class="warning-desc">{{ warning.description }}</text>
              </view>
              <view class="warning-count">{{ warning.count }}</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 物料排行 -->
      <view class="material-ranking">
        <text class="section-title">热门物料</text>
        <view class="ranking-list">
          <view 
            v-for="(material, index) in topMaterials" 
            :key="material.id"
            class="ranking-item"
            @click="showMaterialDetail(material)"
          >
            <view class="rank-number">{{ index + 1 }}</view>
            <view class="material-info">
              <text class="material-name">{{ material.name }}</text>
              <text class="material-spec">{{ material.spec }}</text>
            </view>
            <view class="material-stats">
              <text class="stock-count">{{ material.stock }}{{ material.unit }}</text>
              <text class="turnover-rate">{{ material.turnover }}%</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 智能建议 -->
      <view class="smart-suggestions">
        <text class="section-title">智能建议</text>
        <view class="suggestion-list">
          <view 
            v-for="suggestion in smartSuggestions" 
            :key="suggestion.id"
            class="suggestion-card"
            :class="suggestion.priority"
          >
            <view class="suggestion-icon">{{ suggestion.icon }}</view>
            <view class="suggestion-content">
              <text class="suggestion-title">{{ suggestion.title }}</text>
              <text class="suggestion-desc">{{ suggestion.description }}</text>
            </view>
            <view class="suggestion-action" @click="handleSuggestion(suggestion)">
              <text class="action-text">{{ suggestion.actionText }}</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 底部工具栏 -->
    <view class="mobile-toolbar">
      <view class="toolbar-item" @click="toggleDrawer">
        <text class="toolbar-icon">⚙️</text>
        <text class="toolbar-text">筛选</text>
      </view>
      <view class="toolbar-item" @click="refreshData">
        <text class="toolbar-icon">🔄</text>
        <text class="toolbar-text">刷新</text>
      </view>
      <view class="toolbar-item" @click="exportData">
        <text class="toolbar-icon">📊</text>
        <text class="toolbar-text">导出</text>
      </view>
      <view class="toolbar-item" @click="shareData">
        <text class="toolbar-icon">📤</text>
        <text class="toolbar-text">分享</text>
      </view>
    </view>

    <!-- 详情弹窗 -->
    <u-popup 
      :show="showDetailPopup"
      mode="bottom"
      @close="closeDetailPopup"
    >
      <view class="detail-popup">
        <view class="popup-header">
          <text class="popup-title">{{ detailType === 'material' ? '物料详情' : '预警详情' }}</text>
          <text class="close-btn" @click="closeDetailPopup">✕</text>
        </view>
        
        <scroll-view class="popup-content" scroll-y>
          <view v-if="detailType === 'material'" class="material-detail">
            <view class="detail-section">
              <text class="section-title">基本信息</text>
              <view class="detail-grid">
                <view class="detail-item">
                  <text class="label">物料编码</text>
                  <text class="value">{{ selectedDetail.code }}</text>
                </view>
                <view class="detail-item">
                  <text class="label">物料名称</text>
                  <text class="value">{{ selectedDetail.name }}</text>
                </view>
                <view class="detail-item">
                  <text class="label">规格型号</text>
                  <text class="value">{{ selectedDetail.spec }}</text>
                </view>
                <view class="detail-item">
                  <text class="label">当前库存</text>
                  <text class="value">{{ selectedDetail.stock }}{{ selectedDetail.unit }}</text>
                </view>
              </view>
            </view>
            
            <view class="detail-section">
              <text class="section-title">历史趋势</text>
              <canvas 
                canvas-id="detailTrendChart"
                class="detail-chart"
              ></canvas>
            </view>
          </view>
          
          <view v-else class="warning-detail">
            <view class="detail-section">
              <text class="section-title">预警信息</text>
              <view class="warning-info">
                <view class="warning-level" :class="selectedDetail.level">
                  <text class="level-text">{{ getWarningLevelText(selectedDetail.level) }}</text>
                </view>
                <text class="warning-message">{{ selectedDetail.message }}</text>
              </view>
            </view>
            
            <view class="detail-section">
              <text class="section-title">建议操作</text>
              <view class="action-buttons">
                <view 
                  v-for="action in selectedDetail.actions" 
                  :key="action.id"
                  class="action-button"
                  :class="action.type"
                  @click="handleAction(action)"
                >
                  {{ action.label }}
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </u-popup>
  </view>
</template>

export default {
  data() {
    return {
      drawerOpen: false,
      activeFilter: 'today',
      selectedTimeRange: '1d',
      selectedWarehouses: ['all'],
      selectedTypes: ['all'],
      selectedWarnings: ['all'],
      showDetailPopup: false,
      detailType: 'material',
      selectedDetail: {},
      overviewCards: [
        {
          id: 1,
          icon: '📦',
          label: '总库存',
          value: 2847500,
          gradient: 'linear-gradient(135deg, #3b82f6, #1d4ed8)',
          trend: 12.5,
          action: 'showInventoryDetail'
        },
        {
          id: 2,
          icon: '🔄',
          label: '周转率',
          value: 3.2,
          gradient: 'linear-gradient(135deg, #10b981, #059669)',
          trend: 8.3,
          action: 'showTurnoverDetail'
        },
        {
          id: 3,
          icon: '⚠️',
          label: '预警',
          value: 23,
          gradient: 'linear-gradient(135deg, #f59e0b, #d97706)',
          trend: -15.2,
          action: 'showWarningDetail'
        },
        {
          id: 4,
          icon: '📊',
          label: '日均',
          value: 156,
          gradient: 'linear-gradient(135deg, #8b5cf6, #7c3aed)',
          trend: 5.7,
          action: 'showDailyDetail'
        }
      ],
      topMaterials: [
        {
          id: 1,
          name: '螺纹钢 HRB400',
          spec: 'Φ12*12000',
          stock: 1250,
          unit: '件',
          turnover: 85.3
        },
        {
          id: 2,
          name: '螺纹钢 HRB400',
          spec: 'Φ16*12000',
          stock: 890,
          unit: '件',
          turnover: 72.1
        },
        {
          id: 3,
          name: '盘螺 HRB400',
          spec: 'Φ8*1000',
          stock: 650,
          unit: '件',
          turnover: 68.5
        },
        {
          id: 4,
          name: '角钢 Q235',
          spec: '50*50*5',
          stock: 320,
          unit: '件',
          turnover: 45.2
        },
        {
          id: 5,
          name: '工字钢 Q235',
          spec: '20#',
          stock: 180,
          unit: '件',
          turnover: 38.7
        }
      ],
      warnings: [
        {
          id: 1,
          level: 'warning',
          icon: '⚠️',
          title: '低库存预警',
          description: '螺纹钢HRB400库存低于安全线',
          count: 15,
          message: '当前库存已降至安全库存线以下，建议及时补货',
          actions: [
            { id: 1, label: '查看详情', type: 'primary' },
            { id: 2, label: '立即补货', type: 'success' }
          ]
        },
        {
          id: 2,
          level: 'danger',
          icon: '🔴',
          title: '临期物料',
          description: '角钢Q235即将超过保质期',
          count: 5,
          message: '部分角钢物料即将超过保质期，需要紧急处理',
          actions: [
            { id: 1, label: '查看详情', type: 'primary' },
            { id: 2, label: '标记处理', type: 'warning' }
          ]
        },
        {
          id: 3,
          level: 'info',
          icon: 'ℹ️',
          title: '滞销物料',
          description: '工字钢Q235超过30天无出入库',
          count: 3,
          message: '工字钢类物料周转率偏低，建议调整采购策略',
          actions: [
            { id: 1, label: '查看详情', type: 'primary' },
            { id: 2, label: '制定计划', type: 'info' }
          ]
        }
      ],
      smartSuggestions: [
        {
          id: 1,
          priority: 'high',
          icon: '📈',
          title: '库存优化',
          description: '螺纹钢HRB400库存偏高，建议减少采购量20%',
          actionText: '立即处理'
        },
        {
          id: 2,
          priority: 'medium',
          icon: '⚡',
          title: '周转率提升',
          description: '角钢类物料周转率偏低，建议优化采购策略',
          actionText: '制定计划'
        }
      ],
      quickFilters: [
        { label: '今日', value: 'today' },
        { label: '本周', value: 'week' },
        { label: '本月', value: 'month' },
        { label: '本季', value: 'quarter' }
      ],
      timeRanges: [
        { label: '今日', value: '1d' },
        { label: '本周', value: '7d' },
        { label: '本月', value: '30d' },
        { label: '本季', value: '90d' },
        { label: '本年', value: '365d' }
      ],
      warehouses: [
        { id: 'all', name: '全部仓库' },
        { id: 'main', name: '主仓库' },
        { id: 'raw', name: '原材料库' },
        { id: 'finished', name: '成品库' },
        { id: 'semi', name: '半成品库' }
      ],
      materialTypes: [
        { label: '全部类型', value: 'all' },
        { label: '螺纹钢', value: 'rebar' },
        { label: '盘螺', value: 'coil' },
        { label: '角钢', value: 'angle' },
        { label: '工字钢', value: 'i-beam' }
      ],
      warningLevels: [
        { label: '全部', value: 'all', color: '#64748b' },
        { label: '正常', value: 'normal', color: '#10b981' },
        { label: '预警', value: 'warning', color: '#f59e0b' },
        { label: '危险', value: 'danger', color: '#ef4444' }
      ]
    }
  },
  
  methods: {
    toggleDrawer() {
      this.drawerOpen = !this.drawerOpen
    },
    
    changeFilter(filter) {
      this.activeFilter = filter
      this.loadData()
    },
    
    showInventoryDetail() {
      // 显示库存详情
      this.showToast('库存详情功能开发中')
    },
    
    showTurnoverDetail() {
      // 显示周转率详情
      this.showToast('周转率详情功能开发中')
    },
    
    showWarningDetail() {
      // 显示预警详情
      this.showToast('预警详情功能开发中')
    },
    
    showDailyDetail() {
      // 显示日均详情
      this.showToast('日均详情功能开发中')
    },
    
    handleCardAction(action) {
      if (typeof this[action] === 'function') {
        this[action]()
      }
    },
    
    loadData() {
      // 加载数据逻辑
      this.showToast('数据加载中...')
    },
    
    showToast(message) {
      uni.showToast({
        title: message,
        icon: 'none'
      })
    }
  },
  
  onLoad() {
    this.loadData()
  }
}
  {
    id: 3,
    priority: 'low',
    icon: '🎯',
    title: '仓库优化',
    description: '成品库利用率已达92%，建议扩容或调整布局',
    actionText: '规划方案'
  }
])

// 计算属性
const activeFilterLabel = computed(() => {
  const filter = quickFilters.find(f => f.value === activeFilter.value)
  return filter ? filter.label : '今日'
})

const filteredWarnings = computed(() => {
  if (selectedWarnings.value.includes('all')) return warnings.value
  return warnings.value.filter(w => selectedWarnings.value.includes(w.level))
})

// 方法
const toggleDrawer = () => {
  drawerOpen.value = !drawerOpen.value
}

const selectFilter = (filter) => {
  activeFilter.value = filter
  loadData()
}

const selectTimeRange = (range) => {
  selectedTimeRange.value = range
}

const toggleWarehouse = (warehouseId) => {
  if (warehouseId === 'all') {
    selectedWarehouses.value = ['all']
  } else {
    selectedWarehouses.value = selectedWarehouses.value.filter(id => id !== 'all')
    const index = selectedWarehouses.value.indexOf(warehouseId)
    if (index > -1) {
      selectedWarehouses.value.splice(index, 1)
    } else {
      selectedWarehouses.value.push(warehouseId)
    }
  }
}

const toggleMaterialType = (type) => {
  if (type === 'all') {
    selectedTypes.value = ['all']
  } else {
    selectedTypes.value = selectedTypes.value.filter(t => t !== 'all')
    const index = selectedTypes.value.indexOf(type)
    if (index > -1) {
      selectedTypes.value.splice(index, 1)
    } else {
      selectedTypes.value.push(type)
    }
  }
}

const toggleWarningLevel = (level) => {
  if (level === 'all') {
    selectedWarnings.value = ['all']
  } else {
    selectedWarnings.value = selectedWarnings.value.filter(l => l !== 'all')
    const index = selectedWarnings.value.indexOf(level)
    if (index > -1) {
      selectedWarnings.value.splice(index, 1)
    } else {
      selectedWarnings.value.push(level)
    }
  }
}

const resetFilters = () => {
  selectedTimeRange.value = '1d'
  selectedWarehouses.value = ['all']
  selectedTypes.value = ['all']
  selectedWarnings.value = ['all']
}

const applyFilters = () => {
  drawerOpen.value = false
  loadData()
}

const formatValue = (value) => {
  if (value >= 1000000) {
    return (value / 1000000).toFixed(1) + 'M'
  }
  if (value >= 1000) {
    return (value / 1000).toFixed(1) + 'K'
  }
  return value.toString()
}

const loadData = () => {
  // 模拟加载数据
  console.log('Loading data with filters:', {
    timeRange: selectedTimeRange.value,
    warehouses: selectedWarehouses.value,
    types: selectedTypes.value,
    warnings: selectedWarnings.value
  })
}

const showMaterialDetail = (material) => {
  selectedDetail.value = material
  detailType.value = 'material'
  showDetailPopup.value = true
}

const showWarningDetail = (warning) => {
  selectedDetail.value = warning
  detailType.value = 'warning'
  showDetailPopup.value = true
}

const closeDetailPopup = () => {
  showDetailPopup.value = false
}

const getWarningLevelText = (level) => {
  const levelMap = {
    normal: '正常',
    warning: '预警',
    danger: '危险'
  }
  return levelMap[level] || level
}

const handleAction = (action) => {
  uni.showToast({
    title: `执行操作: ${action.label}`,
    icon: 'none'
  })
}

const handleSuggestion = (suggestion) => {
  uni.showToast({
    title: `处理建议: ${suggestion.title}`,
    icon: 'none'
  })
}

const handleScroll = (e) => {
  // 处理滚动事件，可以用于隐藏/显示某些元素
  console.log('Scroll position:', e.detail.scrollTop)
}

const refreshData = () => {
  loadData()
  uni.showToast({
    title: '数据已刷新',
    icon: 'success'
  })
}

const exportData = () => {
  uni.showModal({
    title: '导出数据',
    content: '确定要导出当前筛选的数据吗？',
    success: (res) => {
      if (res.confirm) {
        uni.showLoading({ title: '导出中...' })
        setTimeout(() => {
          uni.hideLoading()
          uni.showToast({
            title: '导出成功',
            icon: 'success'
          })
        }, 1500)
      }
    }
  })
}

const shareData = () => {
  uni.share({
    provider: 'weixin',
    scene: 'WXSceneSession',
    type: 1,
    summary: '仓库数据洞察报告',
    success: () => {
      uni.showToast({
        title: '分享成功',
        icon: 'success'
      })
    }
  })
}

// 占位方法
const showInventoryDetail = () => {}
const showTurnoverDetail = () => {}
const showDailyDetail = () => {}

// 初始化
onMounted(() => {
  loadData()
})
</script>

<style lang="scss" scoped>
.mobile-insights {
  min-height: 100vh;
  background: #f8fafc;
  position: relative;
}

.mobile-header {
  background: #ffffff;
  padding: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  
  .menu-btn,
  .refresh-btn {
    font-size: 36rpx;
    padding: 10rpx;
    color: #1e293b;
  }
  
  .title {
    font-size: 32rpx;
    font-weight: 600;
    color: #1e293b;
  }
}

.quick-filters {
  white-space: nowrap;
  
  .filter-chip {
    display: inline-block;
    padding: 12rpx 24rpx;
    margin-right: 12rpx;
    background: #e2e8f0;
    border-radius: 20rpx;
    font-size: 24rpx;
    color: #64748b;
    transition: all 0.3s ease;
    
    &.active {
      background: #3b82f6;
      color: white;
    }
  }
}

.drawer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  visibility: hidden;
  transition: visibility 0.3s ease;
  
  &.open {
    visibility: visible;
  }
  
  .drawer-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
    
    .open & {
      opacity: 1;
    }
  }
  
  .drawer-content {
    position: absolute;
    top: 0;
    right: 0;
    width: 80%;
    height: 100%;
    background: white;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    
    .open & {
      transform: translateX(0);
    }
  }
  
  .drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40rpx 32rpx 20rpx;
    border-bottom: 1rpx solid #e2e8f0;
    
    .drawer-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #1e293b;
    }
    
    .close-btn {
      font-size: 36rpx;
      color: #64748b;
    }
  }
  
  .drawer-body {
    flex: 1;
    padding: 20rpx;
  }
  
  .filter-group {
    margin-bottom: 40rpx;
    
    .group-title {
      display: block;
      font-size: 28rpx;
      font-weight: 600;
      color: #1e293b;
      margin-bottom: 16rpx;
    }
    
    .filter-options {
      display: flex;
      flex-wrap: wrap;
      gap: 12rpx;
      
      .filter-option {
        padding: 12rpx 24rpx;
        background: #e2e8f0;
        border-radius: 20rpx;
        font-size: 24rpx;
        color: #64748b;
        transition: all 0.3s ease;
        
        &.active {
          background: #3b82f6;
          color: white;
        }
      }
    }
  }
  
  .drawer-footer {
    display: flex;
    gap: 20rpx;
    padding: 20rpx;
    border-top: 1rpx solid #e2e8f0;
    
    .footer-btn {
      flex: 1;
      padding: 24rpx 0;
      border-radius: 12rpx;
      text-align: center;
      font-size: 28rpx;
      font-weight: 500;
      
      &.reset {
        background: #e2e8f0;
        color: #1e293b;
      }
      
      &.apply {
        background: #3b82f6;
        color: white;
      }
    }
  }
}

.mobile-content {
  flex: 1;
  padding: 20rpx;
  padding-bottom: 120rpx;
}

.overview-cards {
  margin-bottom: 40rpx;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.overview-card {
  padding: 32rpx;
  border-radius: 16rpx;
  color: white;
  text-align: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  
  .card-icon {
    font-size: 48rpx;
    margin-bottom: 16rpx;
  }
  
  .card-value {
    display: block;
    font-size: 36rpx;
    font-weight: 700;
    margin-bottom: 8rpx;
  }
  
  .card-label {
    display: block;
    font-size: 24rpx;
    opacity: 0.9;
    margin-bottom: 8rpx;
  }
  
  .card-trend {
    font-size: 20rpx;
    
    .up {
      color: #10b981;
    }
    
    .down {
      color: #ef4444;
    }
  }
}

.charts-section {
  margin-bottom: 40rpx;
}

.chart-container {
  background: white;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  
  .chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    
    .chart-title {
      font-size: 28rpx;
      font-weight: 600;
      color: #1e293b;
    }
    
    .chart-period {
      font-size: 24rpx;
      color: #64748b;
    }
  }
  
  .chart-wrapper {
    height: 300rpx;
  }
  
  .mobile-chart {
    width: 100%;
    height: 100%;
  }
}

.warning-stats,
.material-ranking,
.smart-suggestions {
  margin-bottom: 40rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 20rpx;
}

.warning-list,
.ranking-list,
.suggestion-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.warning-item,
.ranking-item,
.suggestion-card {
  background: white;
  border-radius: 12rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.warning-item {
  display: flex;
  align-items: center;
  gap: 16rpx;
  
  &.warning {
    border-left: 4rpx solid #f59e0b;
  }
  
  &.danger {
    border-left: 4rpx solid #ef4444;
  }
  
  &.info {
    border-left: 4rpx solid #3b82f6;
  }
  
  .warning-icon {
    font-size: 36rpx;
  }
  
  .warning-content {
    flex: 1;
    
    .warning-title {
      display: block;
      font-size: 28rpx;
      font-weight: 500;
      color: #1e293b;
    }
    
    .warning-desc {
      display: block;
      font-size: 24rpx;
      color: #64748b;
    }
  }
  
  .warning-count {
    font-size: 28rpx;
    font-weight: 600;
    color: #1e293b;
  }
}

.ranking-item {
  display: flex;
  align-items: center;
  gap: 16rpx;
  
  .rank-number {
    width: 40rpx;
    height: 40rpx;
    background: #3b82f6;
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 40rpx;
    font-size: 24rpx;
    font-weight: 600;
  }
  
  .material-info {
    flex: 1;
    
    .material-name {
      display: block;
      font-size: 28rpx;
      font-weight: 500;
      color: #1e293b;
    }
    
    .material-spec {
      display: block;
      font-size: 24rpx;
      color: #64748b;
    }
  }
  
  .material-stats {
    text-align: right;
    
    .stock-count {
      display: block;
      font-size: 28rpx;
      font-weight: 600;
      color: #1e293b;
    }
    
    .turnover-rate {
      display: block;
      font-size: 24rpx;
      color: #64748b;
    }
  }
}

.suggestion-card {
  display: flex;
  align-items: center;
  gap: 16rpx;
  
  &.high {
    border-left: 4rpx solid #ef4444;
  }
  
  &.medium {
    border-left: 4rpx solid #f59e0b;
  }
  
  &.low {
    border-left: 4rpx solid #3b82f6;
  }
  
  .suggestion-icon {
    font-size: 36rpx;
  }
  
  .suggestion-content {
    flex: 1;
    
    .suggestion-title {
      display: block;
      font-size: 28rpx;
      font-weight: 500;
      color: #1e293b;
    }
    
    .suggestion-desc {
      display: block;
      font-size: 24rpx;
      color: #64748b;
    }
  }
  
  .suggestion-action {
    padding: 8rpx 16rpx;
    background: #3b82f6;
    color: white;
    border-radius: 20rpx;
    font-size: 24rpx;
    
    .action-text {
      font-size: 24rpx;
    }
  }
}

.mobile-toolbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  display: flex;
  border-top: 1rpx solid #e2e8f0;
  
  .toolbar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20rpx 0;
    
    .toolbar-icon {
      font-size: 32rpx;
      margin-bottom: 8rpx;
    }
    
    .toolbar-text {
      font-size: 20rpx;
      color: #64748b;
    }
  }
}

.detail-popup {
  background: white;
  border-radius: 40rpx 40rpx 0 0;
  max-height: 80vh;
  
  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40rpx 32rpx 20rpx;
    border-bottom: 1rpx solid #e2e8f0;
    
    .popup-title {
      font-size: 36rpx;
      font-weight: 600;
      color: #1e293b;
    }
    
    .close-btn {
      font-size: 36rpx;
      color: #64748b;
    }
  }
  
  .popup-content {
    padding: 32rpx;
    max-height: 60vh;
  }
  
  .detail-section {
    margin-bottom: 40rpx;
    
    .section-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #1e293b;
      margin-bottom: 24rpx;
    }
    
    .detail-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20rpx;
      
      .detail-item {
        .label {
          display: block;
          font-size: 24rpx;
          color: #64748b;
          margin-bottom: 8rpx;
        }
        
        .value {
          display: block;
          font-size: 28rpx;
          font-weight: 500;
          color: #1e293b;
        }
      }
    }
    
    .detail-chart {
      width: 100%;
      height: 300rpx;
    }
    
    .warning-info {
      .warning-level {
        display: inline-block;
        padding: 8rpx 16rpx;
        border-radius: 20rpx;
        font-size: 24rpx;
        margin-bottom: 16rpx;
        
        &.warning {
          background: rgba(#f59e0b, 0.1);
          color: #f59e0b;
        }
        
        &.danger {
          background: rgba(#ef4444, 0.1);
          color: #ef4444;
        }
        
        &.info {
          background: rgba(#3b82f6, 0.1);
          color: #3b82f6;
        }
      }
      
      .warning-message {
        display: block;
        font-size: 28rpx;
        color: #1e293b;
        line-height: 1.5;
      }
    }
    
    .action-buttons {
      display: flex;
      flex-direction: column;
      gap: 16rpx;
      
      .action-button {
        padding: 24rpx 0;
        border-radius: 12rpx;
        text-align: center;
        font-size: 28rpx;
        font-weight: 500;
        
        &.primary {
          background: #3b82f6;
          color: white;
        }
        
        &.success {
          background: #10b981;
          color: white;
        }
        
        &.warning {
          background: #f59e0b;
          color: white;
        }
        
        &.info {
          background: #8b5cf6;
          color: white;
        }
      }
    }
  }
}
</style>